<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<style>
.container{
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
	float:left;
}
.progressbar {
    color: #fff;
    text-align: right;
    height: 10px;
    width: 0;
    background-color: #ff0000; 
    border-radius: 3px; 
}
</style>
<body>
<h1>jQuery Progress bar Demo</h1>
<div class="container"><div class="progressbar"></div></div><div id="rate" style="float:left;font-size:12px"></div>
</div>

 

</section>
<script>
var bar = 0;
function fnDrawProgress()
{
	if (bar < 100)
	{
		bar += 1;
		setProgress(bar);	
		setTimeout("fnDrawProgress();",100);
	}	
}
$(document).ready(function()
{
fnDrawProgress();
	//setProgress(60);	

});
function setProgress(progress)
{			
	 	var progressBarWidth =progress*$(".container").width()/ 100;  
	 	$(".progressbar").width(progressBarWidth);
		$("#rate").html(progress + "%&nbsp;");
}
</script>

